<template>
    <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)">
        <div class="inner">
            <slot></slot>
            <div class="load-more" v-show="enableLoadMore">{{loadMoreText}}</div>
            <div class="load-end" v-show="!enableLoadMore">已经到底了!</div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "LoadMore",
        props: {
            enableLoadMore: {
                type: Boolean,
                default: true
            },
            onLoadMore: {
                type: Function,
                default: undefined,
                require: false
            }
        },
        data() {
            return {
                loadMoreText: "上拉加载更多",
                startX: 0,
                startY: 0,
                isLoading: false,
            }
        },
        methods: {
            touchStart(e) {
                this.startY = e.targetTouches[0].pageY;
                this.startX = e.targetTouches[0].pageX;
            },
            scrollToEnd(e) {
                let scrollHeight = this.$el.scrollHeight;
                let clientHeight = this.$el.clientHeight;
                let scrollTop = this.$el.scrollTop;

                if (scrollTop + clientHeight >= scrollHeight || this.enableLoadMore) {
                    this.doLoadMore()
                }
            },
            touchEnd(e) {
                if (this.isLoading) {
                    return;
                }

                let endX = e.changedTouches[0].pageX,
                    endY = e.changedTouches[0].pageY,
                    dy = this.startY - endY,
                    dx = endX - this.startX;
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return;
                }
                if (endY < this.startY) {
                    this.scrollToEnd(e)
                }
            },
            doLoadMore() {
                this.isLoading = true
                this.loadMoreText = '加载中...'
                this.onLoadMore(this.loadDone);
            },
            loadDone() {
                this.isLoading = false;
                this.loadMoreText = '上拉加载更多'
            }
        }

    }
</script>
<style scoped>
    .load-more-wrapper {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition-duration: 300ms;
    }

    .load-more .load-end {
        color: #aea699;
        font-size: 1rem;
        margin: .3rem 0;
        text-align: center;
    }
</style>